<template>
  <el-dialog :title="title" :visible.sync="visible" :width="width" top="5vh" :close-on-click-modal='false' append-to-body class="bonus fix-height">
    <!--搜索栏目-->
    <div class="search-form">
      <el-form :inline="true" :model="searchForm" >
        <el-form-item label="负责机构" >
          <el-select v-model="searchForm.bonusItemDeptId" placeholder="负责机构" disabled>
            <el-option
              v-for="item in bonusItemDeptIdOptions"
              :key="item.deptId"
              :label="item.name"
              :value="item.deptId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="奖金项">
          <el-input v-model="searchForm.bonusItemName" placeholder="奖金项" clearable></el-input>
        </el-form-item>
        <el-form-item label="ECC奖金编号">
          <el-input v-model="searchForm.eccCode" placeholder="ECC奖金编号" clearable></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </div>
    </div>
    <div>
      <el-table ref="table" :data="tableData" v-loading="loading" border  @selection-change="handleSelectionChange" :height="`calc(100vh - 400px )`">
        <el-table-column
          type="selection"
          width="45"
          fixed="left">
        </el-table-column>
        <el-table-column
          width="60px"
          prop=""
          label="序号"
          align="center"
          fixed="left">
        >
          <template slot-scope="scope">
            {{(page.currentPage - 1) * page.pageSize + scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column
          prop="bonusItemName"
          label="奖金项名称"
          align="left"
          min-width="200"
          fixed="left"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="eccCode"
          label="ECC奖金编号"
          min-width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="bonusItemCode"
          label="系统内奖金项编号"
          width="220"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="bonusItemDeptName"
          label="负责机构"
          min-width="120"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="bonusItemScope"
          label="奖金项范围"
          min-width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="childFlag"
          label="分解状态"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="{row}">
            {{row.childFlag == '1' ? '已分解' : '未分解'}}
          </template>
        </el-table-column>
<!--        <el-table-column
          prop="bonusItemDescription"
          label="奖金项说明"
          align="left"
          show-overflow-tooltip
        ></el-table-column>-->

      </el-table>
      <!--分页-->
      <div class="avue-crud__pagination">
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="page.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="page.pageSize"
          :total="page.total"
          background
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary"  @click="handleSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {addObj,putObj}  from '@/api/bonus/dataorgrewardpunish' ;
import selectTree from '@/views/bonusmanage/components/selectTree'
import {fetchList, getOrg} from "@/api/bonus/items";
export default {
  name: "orgForm",
  components:{
    selectTree
  },
  props:{

  },
  watch: {

  },
  data(){
    return{
      type:'add',
      formLoading:false,
      title:'奖金项',
      width:'60%',
      visible: false,
      labelWidth:'125px',
      loading:false,
      page:{
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      tableData: [],
      bonusItemDeptIdOptions:[],
      searchForm: {bonusItemDeptId:''},
      multipleSelection:[]
    }
  },
  methods:{
    async init(bonusItemDeptId){
      this.$set(this.searchForm,'bonusItemDeptId',bonusItemDeptId)
      this.getOrg() ;
      this.visible = true ;
    },
    getOrg(){
      getOrg().then(res => {
        this.bonusItemDeptIdOptions = res.data.data
        //获取数据
        this.onLoad() ;
      })
    },
    handleSubmit(){
      if (this.multipleSelection.length > 0) {
        if (!this.multipleSelection[0]) {
          //勾选一个奖金项，然后再去掉会出现[undefined]情况，所以在这判断一下
          this.$message.error("请选择一个奖金项")
          return
        } else {
          this.$emit("sendBonusItem", this.multipleSelection[0])
          this.handleCancel()
        }
      } else {
        this.$message.error("请选择一个奖金项")
        return
      }
    },
    handleCancel(){
      this.visible = false ;
      this.multipleSelection = []
    },
    nodeClick(item){
      this.formData.parentDeptName = item.name
    },
    handleSearch(){
      this.onLoad() ;
    },
    onLoad(){
      this.loading = true ;
      fetchList(Object.assign({
        current: this.page.currentPage,
        size: this.page.pageSize
      },this.searchForm)).then(res=>{
        if (res.data.code == 0){
          this.tableData = res.data.data.records
          this.page.total = res.data.data.total ;
          this.page.currentPage = res.data.data.current ;
        }else{
          this.$message.error(res.data.msg)
        }
        this.loading = false ;
      }).catch(()=>{
        this.loading = false ;
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.page.pageSize = val;
      this.page.currentPage = 1;
      this.onLoad() ;
    },
    // 当前页
    currentChangeHandle(val) {
      this.page.currentPage = val;
      this.onLoad() ;
    },
    handleSelectionChange(list) {
      this.multipleSelection = []
      if (list.length > 1) {
        list.map((item) => {
          this.$refs.table.toggleRowSelection(item, false)
        })
        this.$refs.table.toggleRowSelection(list[list.length - 1], true)
      }
      this.multipleSelection = [list[list.length - 1]]
    },
  }
}
</script>

<style scoped>

</style>
